{extend name='public/base' /}
{block name='content'}
{include file='public/content_header' /}
<style>
    .tishi{
        color: #5cb85c;
        position: absolute;
        z-index: 5;
        left: 220px;
        width: 100%;
        top: 5px;
        font-size: 14px;
    }

</style>
<section class="content">

    <div class="row">
        <div class="col-md-12">
            <div class="box box-primary">
                <!-- 表单头部 -->
                <div class="box-header with-border">
                    <div class="btn-group">
                        <a class="btn flat btn-sm btn-default BackButton">
                            <i class="fa fa-arrow-left"></i>
                            返回
                        </a>
                    </div>
                </div>
                <!-- 表单 -->
                <form id="dataForm" class="form-horizontal dataForm" action="" method="post"
                      enctype="multipart/form-data">
                    <!-- 表单字段区域 -->
                    <div class="box-body">
                        <div class="form-group">
                            <label for="attendance_time" class="col-sm-2 control-label">考勤时间</label>
                            <div class="col-sm-10 col-md-4">
                                <input id="attendance_time" name="attendance_time"
                                       value="{$data.attendance_time|default=''}" placeholder="请选择考勤时间" type="text"
                                       class="form-control filed-datetime" autocomplete="off">
                            </div>
                        </div>
                        <script>
                            var currentTime ='';
                            if ($('#attendance_time').val()){
                                currentTime = $('#attendance_time').val();
                            }
                            laydate.render({
                                elem: '#attendance_time',
                                type: 'month',
                                value:currentTime,
                                btns:[],
                                ready: function (date) {
                                    $(".layui-laydate").on('click', 'ul li', function () {
                                        $(".layui-laydate").remove();
                                    });
                                },
                                change: function (value) {
                                    $("#attendance_time").val(value);
                                    let departmentId = $('#department_id').val();
                                    let time = value;
                                    let option = "Attendance";
                                    if (departmentId){
                                        $.ajax({
                                            url: "{:url('attendance/getStaffByDepartmentId')}",
                                            type: "post",
                                            data: {"departmentId": departmentId,'time':time,'option':option},
                                            dataType: "json",
                                            sync: false,
                                            success: function (res) {
                                                if (res.code===0){
                                                    layer.alert(res.msg, {
                                                        icon: 0,
                                                        skin: 'layer-ext-moon' //该皮肤由layer.seaning.com友情扩展。关于皮肤的扩展规则，去这里查阅
                                                    })
                                                    $('#staff_id').empty();
                                                    return false;
                                                } else {

                                                    $('#staff_id').empty();
                                                    $('#staff_id').append(`<option value=""></option>`);
                                                    var _html = '';
                                                    $.each(res.data,function (e,v) {

                                                        _html  +=
                                                            `<option value="${v.id}">${v.name}</option>`
                                                        ;
                                                    })
                                                    $('#staff_id').append(_html).trigger('change.select2');
                                                    $('#staff_id').select2();
                                                    $('#department_id-error').empty();
                                                    $('#staff_id-error').empty();
                                                }
                                            }
                                        })
                                    }
                                },
                            });
                        </script>
                        <div class="form-group">
                            <label for="department_id" class="col-sm-2 control-label">部门</label>
                            <div class="col-sm-10 col-md-4">
                                <select name="department_id" id="department_id" {if isset($data) &&
                                        isset($data.staff_id)} disabled=true{/if}  class="form-control field-select"
                                        data-placeholder="请选择部门">
                                    <option value=""></option>
                                    {$department_list|raw}
                                </select>
                            </div>
                        </div>
                        <script>
                            $('#department_id').select2();

                            $('#department_id').change(function () {
                                let departmentId = $(this).val();
                                let time = $('#attendance_time').val();
                                let option = 'Attendance';
                                let depart_type = $("#department_id option:selected").attr('data-type');
                                if (depart_type==='1'){
                                    $('#position_level').val(null).trigger("change");
                                    $('#miss_card_cut').val('');
                                    $('#miss_sign_times').val('');
                                    $('#miss_sign_cut').val('');
                                    $('#position_level').attr('disabled',true);
                                    $('#miss_card_cut').attr('disabled',true);
                                    $('#miss_sign_times').attr('disabled',true);
                                    $('#miss_sign_cut').attr('disabled',true);
                                }
                                if (depart_type==='2'){
                                    $('#position_level').attr('disabled',false);
                                    $('#miss_card_cut').attr('disabled',false);
                                    $('#miss_sign_times').attr('disabled',false);
                                    $('#miss_sign_cut').attr('disabled',false);
                                }
                                if (time){
                                    $.ajax({
                                        url: "{:url('attendance/getStaffByDepartmentId')}",
                                        type: "post",
                                        data: {"departmentId": departmentId,'time':time,'option':option},
                                        dataType: "json",
                                        sync: false,
                                        success: function (res) {
                                            if (res.code===0){
                                                layer.alert(res.msg, {
                                                    icon: 0,
                                                    skin: 'layer-ext-moon' //该皮肤由layer.seaning.com友情扩展。关于皮肤的扩展规则，去这里查阅
                                                })
                                                $('#staff_id').empty();
                                            } else {

                                                $('#staff_id').empty();
                                                $('#staff_id').append(`<option value=""></option>`);
                                                var _html = '';
                                                $.each(res.data,function (e,v) {

                                                    _html  +=
                                                        `<option value="${v.id}">${v.name}</option>`
                                                    ;
                                                })
                                                $('#staff_id').append(_html).trigger('change.select2');
                                                $('#staff_id').select2();
                                                $('#department_id-error').empty();
                                                $('#staff_id-error').empty();
                                            }
                                        }
                                    })
                                }else {
                                    layer.alert('请先选择时间',{icon:0})
                                }

                            });

                        </script>

                        <div class="form-group">
                            <label for="staff_id" class="col-sm-2 control-label">员工</label>
                            <div class="col-sm-10 col-md-4">
                                <select name="staff_id" id="staff_id" {if isset($data)&&
                                        isset($data.staff_id)} disabled=true{/if}  class="form-control field-select"
                                        data-placeholder="请选择员工">
                                    {if isset($data.staff_id)}
                                    <option value=""></option>
                                    {foreach name='staff_list' id='item'}
                                    <option value="{$item.id}" {if isset($data.staff_id) &&
                                            $data.staff_id==$item.id}selected{/if}>
                                        {$item.name}
                                    </option>
                                    {/foreach}
                                    {/if}
                                </select>
                            </div>
                        </div>
                        <script>
                            $('#staff_id').select2();
                            $('#staff_id').on("select2:open",function (e) {
                                if ($("#department_id").val() === ''){
                                    layer.alert('请先选择部门', {
                                        icon: 0,
                                    })
                                }
                            });

                            $("#staff_id").on('change',function (e) {
                                let staff_id = $('#staff_id').select2('val');
                                let time = $("#attendance_time").val();
                                $.ajax({
                                    type: 'post',
                                    async:false,
                                    data:{'staff_id':staff_id,'attendance_time':time},
                                    url: "{:url('Attendance/nameUnique')}",
                                    dataType: 'json',
                                    success: function (result) {
                                        if (result.code == 0) {
                                            layer.alert('已存在此员工'+time+'信息', {
                                                icon: 0,
                                            })
                                        }
                                        else {
                                        }
                                    },
                                    error: function () {
                                    }
                                });
                            });
                        </script>
                        <div class="form-group">
                            <label for="position_level" class="col-sm-2 control-label">市场员工职级</label>
                            <div class="col-sm-10 col-md-4">
                                <select name="position_level" id="position_level" class="form-control field-select"
                                        data-placeholder="市场员工职级">
                                    <option value=""></option>
                                    <option value="实习督导">实习督导</option>
                                    <option value="督导">督导</option>
                                    <option value="资深督导">资深督导</option>
                                    <option value="见习经理">见习经理</option>
                                    <option value="经理">经理</option>
                                    <option value="总监">总监</option>

                                </select>
                            </div>
                        </div>

                        <div class="form-group">
                            <label for="sick_leave" class="col-sm-2 control-label">病假时间（时）</label>
                            <div class="col-sm-10 col-md-4">
                                <div class="input-group">
                                    <input id="sick_leave" name="sick_leave" value="{$data.sick_leave|default=''}"
                                           placeholder="请输入病假时间（时）" type="number" class="form-control field-number">
                                </div>
                            </div>
                        </div>
                        <script>
                            $('#position_level').select2({tags: true});
                            // $(function () {
                            //     var flag = 1;
                            //     $('#sick_leave').keyup(function (e) {
                            //         var sick_leave_val = $(this).val();
                            //         var absence_leave_val = $("#absence_leave").val();
                            //         var absenteeism_val = $('#absenteeism').val();
                            //         if (absence_leave_val !=''|| absenteeism_val !='' || sick_leave_val !=''){
                            //             flag = 0;
                            //         }else {
                            //             flag = 1;
                            //         }
                            //         $("input[id='is_full']").bootstrapSwitch("state",flag);
                            //     })
                            // })
                            // $('#sick_leave')
                            //     .bootstrapNumber({
                            //         upClass: 'success',
                            //         downClass: 'primary',
                            //         center: true
                            //     });
                        </script>
                        <div class="form-group">
                            <label for="absence_leave" class="col-sm-2 control-label">事假时间（时）</label>
                            <div class="col-sm-10 col-md-4">
                                <div class="input-group">
                                    <input id="absence_leave" name="absence_leave"
                                           value="{$data.absence_leave|default=''}" placeholder="请输入事假时间（时）"
                                           type="number" class="form-control field-number">
                                </div>
                            </div>
                        </div>
<!--                        <script>-->
<!--                            // $(function () {-->
<!--                            //     var flag = 1;-->
<!--                            //     $('#absence_leave').keyup(function (e) {-->
<!--                            //         var sick_leave_val = $('#sick_leave').val();-->
<!--                            //         var absence_leave_val = $(this).val();-->
<!--                            //         var absenteeism_val = $('#absenteeism').val();-->
<!--                            //         if (absence_leave_val !=''|| absenteeism_val !='' || sick_leave_val !=''){-->
<!--                            //             flag = 0;-->
<!--                            //         }else {-->
<!--                            //             flag = 1;-->
<!--                            //         }-->
<!--                            //         $("input[id='is_full']").bootstrapSwitch("state",flag);-->
<!--                            //     })-->
<!--                            // })-->

<!--                            // $('#absence_leave')-->
<!--                            //     .bootstrapNumber({-->
<!--                            //         upClass: 'success',-->
<!--                            //         downClass: 'primary',-->
<!--                            //         center: true-->
<!--                            //     });-->
<!--                        </script>-->
                        <div class="form-group">
                            <label for="absenteeism" class="col-sm-2 control-label">旷工时间（时）</label>
                            <div class="col-sm-10 col-md-4">
                                <div class="input-group">
                                    <input id="absenteeism" name="absenteeism"
                                           value="{$data.absenteeism|default=''}" placeholder="请输入旷工时间（时）"
                                           type="number" class="form-control field-number">
                                </div>
                            </div>
                        </div>
                        <script>
                            // var flag = 1;
                            // $('#absenteeism').keyup(function (e) {
                            //     var absence_leave_val = $('#absence_leave').val();
                            //     var sick_leave_val   =$('#sick_leave').val();
                            //     var absenteeism_val = $(this).val();
                            //     if (absence_leave_val !=''|| absenteeism_val !='' || sick_leave_val !=''){
                            //         flag = 0;
                            //     }else {
                            //         flag = 1;
                            //     }
                            //     $("input[id='is_full']").bootstrapSwitch("state",flag);
                            // })
                            // $('#absenteeism')
                            //     .bootstrapNumber({
                            //         upClass: 'success',
                            //         downClass: 'primary',
                            //         center: true
                            //     });
                        </script>
                        <div class="form-group">
                            <label for="business_travel" class="col-sm-2 control-label">出差时间（天）</label>
                            <div class="col-sm-10 col-md-4">
                                <div class="input-group">
                                    <input id="business_travel" name="business_travel"
                                           value="{$data.business_travel|default=''}" placeholder="请输入出差时间（天）"
                                           type="number" class="form-control field-number">
                                </div>
                            </div>
                        </div>
<!--                        <script>-->
<!--                            $('#business_travel')-->
<!--                                .bootstrapNumber({-->
<!--                                    upClass: 'success',-->
<!--                                    downClass: 'primary',-->
<!--                                    center: true-->
<!--                                });-->
<!--                        </script>-->

                        <div class="form-group">
                            <label for="storage_time" class="col-sm-2 control-label">日常存班时间（小时）</label>
                            <div class="col-sm-10 col-md-4">
                                <div class="input-group">
                                    <input id="storage_time" name="storage_time"
                                           value="{$data.storage_time|default=''}" placeholder="请输入日常存班时间（时）"
                                           type="number" class="form-control field-number">
                                </div>
                            </div>
                        </div>
<!--                        <script>-->
<!--                            $('#storage_time')-->
<!--                                .bootstrapNumber({-->
<!--                                    upClass: 'success',-->
<!--                                    downClass: 'primary',-->
<!--                                    center: true-->
<!--                                });-->
<!--                        </script>-->
                        <div class="form-group">
                            <label for="storage_meeting_time" class="col-sm-2 control-label">会议存班时间（时）</label>
                            <div class="col-sm-10 col-md-4">
                                <div class="input-group">
                                    <input id="storage_meeting_time" name="storage_meeting_time"
                                           value="{$data.storage_meeting_time|default=''}"
                                           placeholder="请输入会议存班时间（时）" type="number" class="form-control field-number">
                                </div>
                            </div>
                        </div>
<!--                        <script>-->
<!--                            $('#storage_meeting_time')-->
<!--                                .bootstrapNumber({-->
<!--                                    upClass: 'success',-->
<!--                                    downClass: 'primary',-->
<!--                                    center: true-->
<!--                                });-->
<!--                        </script>-->
                        <div class="form-group">
                            <label for="is_full" class="col-sm-2 control-label">是否全勤</label>
                            <div class="col-sm-10 col-md-4">
                                <input class="input-switch"  id="is_full" value="1" {if(!isset($data.is_full) ||$data.is_full==1)}checked{/if} type="checkbox" />
                                <input class="switch field-switch" placeholder="是否全勤" name="is_full" value="{$data.is_full|default='1'}" hidden />
                                <span  style="color: #5cb85c">是否￥200</span>
                            </div>
                        </div>

                        <script>
                            $('#is_full').bootstrapSwitch({
                                onText: "是",
                                offText: "否",
                                onColor: "success",
                                offColor: "danger",
                                onSwitchChange: function (event, state) {
                                    $(event.target).closest('.bootstrap-switch').next().val(state ? '1' : '0').change();
                                }
                            });
                        </script>
                        <div class="form-group">
                            <label for="attendance_days" class="col-sm-2 control-label">出勤天数</label>
                            <div class="col-sm-10 col-md-4">
                                <div class="input-group">
                                    <input id="attendance_days" name="attendance_days" value="{$data.attendance_days|default=''}" placeholder="请输入正常出勤天数" type="number" class="form-control field-number"><span class="tishi" style="color: #5cb85c">权重比全勤高</span>
                                </div>
                            </div>
                        </div>
<!--                        <script>-->
<!--                            $('#attendance_days')-->
<!--                                .bootstrapNumber({-->
<!--                                    upClass: 'success',-->
<!--                                    downClass: 'primary',-->
<!--                                    center: true-->
<!--                                });-->
<!--                        </script>-->

                        <div class="form-group">
                            <label for="late_times" class="col-sm-2 control-label">迟到次数</label>
                            <div class="col-sm-10 col-md-4">
                                <div class="input-group">
                                    <input id="late_times" name="late_times" value="{$data.late_times|default=''}"
                                           placeholder="请输入迟到次数" type="number" class="form-control field-number">
                                </div>
                            </div>
                        </div>
<!--                        <script>-->
<!--                            $('#late_times')-->
<!--                                .bootstrapNumber({-->
<!--                                    upClass: 'success',-->
<!--                                    downClass: 'primary',-->
<!--                                    center: true-->
<!--                                });-->

<!--                        </script>-->
                        <div class="form-group">
                            <label  class="col-sm-2 control-label">迟到情况</label>
                            <div class="col-sm-10 col-md-10 row late_time_contents">
                                {if isset($data.late_time)}
                                {foreach $data.late_time as $key=>$vo }
                                <div class="col-sm-2 col-md-2 late_time_content">
                                    <div class="input-group">
                                        <input id="late_times_num{$key}" name="late_time[]" value="{$vo}"
                                               placeholder="迟到时间(分)" type="number" class="form-control field-number">
                                    </div>
                                </div>
                                {/foreach}
                                {/if}
                            </div>
                        </div>
                        <script>
                            $(function () {
                                $('#late_times').keyup(function (e) {
                                    console.log($(this).val());
                                    var val = $(this).val();
                                    $('.late_time_contents').empty();
                                    for(var i=0;i<val;i++){
                                        $('.late_time_contents').append(
                                            `
                                  <div class="col-sm-2 col-md-2 late_time_content">
<!--                                    <div style="text-align: end;"><text  class="del"  style="background-color: red;padding: 1px 2.5px">X</text></div>-->
                                    <div class="input-group">
                                        <input id="late_times_num${i}" name="late_time[]"
                                               placeholder="迟到时间(分)" type="number" class="form-control field-number">
                                    </div>
                                </div>
                                  `
                                        );
                                    }
                                })
                                // $('.late_time_contents').on('click','.del',function () {
                                //     $(this).parents('.late_time_content').remove();
                                // })
                            })

                        </script>
                        <div class="form-group">
                            <label for="repair_card_times" class="col-sm-2 control-label">补卡次数</label>
                            <div class="col-sm-10 col-md-4">
                                <div class="input-group">
                                    <input id="repair_card_times" name="repair_card_times" value="{$data.repair_card_times|default=''}" placeholder="请输入补卡次数" type="number" class="form-control field-number">
                                </div>
                            </div>
                        </div>
<!--                        <script>-->
<!--                            $('#repair_card_times')-->
<!--                                .bootstrapNumber({-->
<!--                                    upClass: 'success',-->
<!--                                    downClass: 'primary',-->
<!--                                    center: true-->
<!--                                });-->
<!--                        </script>-->
                        <div class="form-group">
                            <label for="miss_card_times" class="col-sm-2 control-label">缺卡次数</label>
                            <div class="col-sm-10 col-md-4">
                                <div class="input-group">
                                    <input id="miss_card_times" name="miss_card_times" value="{$data.miss_card_times|default=''}" placeholder="请输入缺卡次数" type="number" class="form-control field-number">
                                </div>
                            </div>
                        </div>
<!--                        <script>-->
<!--                            $('#miss_card_times')-->
<!--                                .bootstrapNumber({-->
<!--                                    upClass: 'success',-->
<!--                                    downClass: 'primary',-->
<!--                                    center: true-->
<!--                                });-->
<!--                        </script>-->
                        <div class="form-group">
                            <label for="miss_card_cut" class="col-sm-2 control-label">市场缺卡扣款</label>
                            <div class="col-sm-10 col-md-4">
                                <div class="input-group">
                                    <input id="miss_card_cut" name="miss_card_cut" value="{$data.miss_card_cut|default=''}" placeholder="市场缺卡扣款" type="number" class="form-control field-number"> <span class="tishi" style="color: #5cb85c">不填默认公司制度</span>
                                </div>
                            </div>
                        </div>
<!--                        <script>-->
<!--                            $('#miss_card_cut')-->
<!--                                .bootstrapNumber({-->
<!--                                    upClass: 'success',-->
<!--                                    downClass: 'primary',-->
<!--                                    center: true-->
<!--                                });-->
<!--                        </script>-->
                        <div class="form-group">
                            <label for="miss_sign_times" class="col-sm-2 control-label">市场缺签卡次数</label>
                            <div class="col-sm-10 col-md-4">
                                <div class="input-group">
                                    <input id="miss_sign_times" name="miss_sign_times" value="{$data.miss_sign_times|default=''}" placeholder="请输入市场缺签卡次数" type="number" class="form-control field-number">
                                </div>
                            </div>
                        </div>
<!--                        <script>-->
<!--                            $('#miss_sign_times')-->
<!--                                .bootstrapNumber({-->
<!--                                    upClass: 'success',-->
<!--                                    downClass: 'primary',-->
<!--                                    center: true-->
<!--                                });-->
<!--                        </script>-->
                        <div class="form-group">
                            <label for="miss_sign_cut" class="col-sm-2 control-label">市场缺签卡扣款</label>
                            <div class="col-sm-10 col-md-4">
                                <div class="input-group">
                                    <input id="miss_sign_cut" name="miss_sign_cut" value="{$data.miss_sign_cut|default=''}" placeholder="市场缺签卡扣款" type="number" class="form-control field-number"><span class="tishi" style="color: #5cb85c">不填默认公司制度</span>
                                </div>
                            </div>
                        </div>
<!--                        <script>-->
<!--                            $('#miss_sign_cut')-->
<!--                                .bootstrapNumber({-->
<!--                                    upClass: 'success',-->
<!--                                    downClass: 'primary',-->
<!--                                    center: true-->
<!--                                });-->
<!--                        </script>-->

                        <div class="form-group">
                            <label for="remarks" class="col-sm-2 control-label">备注</label>
                            <div class="col-sm-10 col-md-4">
                                <input id="remarks" name="remarks" value="{$data.remarks|default=''}"
                                       placeholder="请输入备注" type="text" class="form-control field-text">
                            </div>
                        </div>

                        <div class="form-group">
                            <label for="file" class="col-sm-2 control-label">附件</label>
                            <div class="col-sm-10 col-md-4">
                                <input id="file" name="file[]" placeholder="请上传附件" multiple="multiple" type="file"
                                       class="form-control field-multi-image">
                            </div>
                        </div>
                        <script>
                            $(function () {
                                $('#file').fileinput({
                                    "initialPreview": false,
                                    overwriteInitial: true,
                                    language: 'zh',
                                    browseLabel: '浏览',
                                    initialPreviewAsData: true,
                                    initialPreviewShowDelete: false,
                                    dropZoneEnabled: false,
                                    showUpload: false,
                                    showRemove: false,
                                    allowedFileTypes: ['image'],
                                    //默认限制10M
                                    maxFileSize: 10240,
                                {if isset($data.file) && $data->getData('file')}
                                initialPreview:{$data->getData('file')|raw},
                                {/if}
                                });
                            })
                        </script>

                    </div>
                    <!-- 表单底部 -->
                    <div class="box-footer">
                        {:token()}
                        <div class="col-sm-2">
                        </div>
                        <div class="col-sm-10 col-md-4">
                            {if !isset($data)}
                            <div class="btn-group pull-right">
                                <label class="createContinue">
                                    <input type="checkbox" value="1" id="_create" name="_create"
                                           title="继续添加数据">继续添加</label>
                            </div>
                            {/if}
                            <div class="btn-group">
                                <button type="submit" class="btn flat btn-info dataFormSubmit">
                                    保存
                                </button>
                            </div>
                            <div class="btn-group">
                                <button type="reset" class="btn flat btn-default dataFormReset">
                                    重置
                                </button>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</section>
<script>

    /** 表单验证 **/
    var url = window.location.href;
    var flag = true;
    if (url.indexOf('edit')>=0){
        flag = false;
    }
    jQuery.validator.addMethod("checkname", function (value, element) {
        var resultval = false;
        jQuery.ajax({
            type: 'post',
            async:false,
            data:{'staff_id':value,'attendance_time':$('#attendance_time').val()},
            url: "{:url('Attendance/nameUnique')}",
            dataType: 'json',
            success: function (result) {
                if (result.code == 0) {
                    resultval = false;
                }
                else {
                    resultval = true;
                }
            },
            error: function () {
            }
        });
        return resultval;

    }, "您的名称重复，请重新输入");
    $("#dataForm").validate({
        // submitHandler:function(form){
        //     let formdata = $('#dataForm').serializeArray();
        //     console.log(formdata);
        //     alert('fffffff');return false;
        //     form.submit();
        // },

        rules: {
            'department_id': {
                required: true,
            },
            'staff_id': {
                required: true,
                checkname:flag,
            },
            'attendance_time': {
                required: true,
            },

        },
        messages: {
            'department_id': {
                required: "部门不能为空",
            },
            'staff_id': {
                required: "员工不能为空",
                checkname: '此员工信息已存在',
            },
            'attendance_time': {
                required: "考勤时间不能为空",
            },

        },

    });
</script>
{/block}